<template>
    <div>
        <!--导航栏-->
        <Nav></Nav>
        <div style="height: 1000px" class="main_content">
            <!--main-->
            <div
                    style="width: 80%;height: 600px;background-color: #ffffff;margin-left: 190px;margin-top: 20px;border-radius: 20px; box-shadow: 2px 2px 15px 1px #999999;">
                <!--酒店详情-->
                <div style="float:left;height: 540px;padding: 30px;width: 40%;border-radius: 20px;" class="main_room">
                    <div>
                        <img :src="require('@/assets/img/'+Room.imgUrl)" style="border-radius: 10px" height="350"
                             width="350"/>
                    </div>
                    <div class="content_room"
                         style="background-color: #f6f6f6;height: 180px;width: 68%;border-radius: 10px;padding: 10px;">
                        <br>
                        <span>房 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：&nbsp;{{Room.name}}</span> <br>
                        <span>床&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;数：&nbsp;{{Room.bed}}位</span> <br>
                        <span>宽 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;带：&nbsp;免费wifi</span> <br>
                        <span>价&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;格：&nbsp;{{Room.price}}RMB</span> <br>
                        <span>剩 &nbsp;余 &nbsp;房 &nbsp;间：&nbsp;{{Room.store}}间</span><br>
                        <span v-if="Room.store==0">状&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;态：&nbsp;房间已满</span>
                        <span v-else>状&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;态：&nbsp;可预订</span>
                    </div>
                </div>
                <!--信息表单-->
                <div style="margin-top: 50px;float:right;height: 560px;padding: 20px;width: 50%;border-radius: 20px;margin-right: 20px"
                     class="hotel_form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="入住人名：" prop="checkName">
                            <el-input v-model="ruleForm.checkName"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式：" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <!--                        <el-form-item label="预订数量：" prop="num">-->
                        <!--                            <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="3"-->
                        <!--                                             label="描述文字"></el-input-number>-->
                        <!--                            &nbsp;&nbsp;&nbsp;<i style="color: #99a9bf;font-size: 10px"-->
                        <!--                                                 class="el-icon-info">注：最多预订三间房,如需团购请电前台0731-5225788</i>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="ruleForm.idCard"></el-input>
                        </el-form-item>
                        <el-form-item label="入住时间：" required>
                            <el-date-picker v-model="value1" type="daterange" range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="留言备注：" prop="desc">
                            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即预订</el-button>
                            &nbsp;&nbsp;&nbsp;
                            <el-button @click="resetForm('ruleForm')">重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Nav from '../components/Nav'

    const baseUrl = "http://localhost:8088"
    export default {
        name: "Hotel",
        components: {
            Nav
        },
        data() {
            // 身份证号校验
            const checkIdNum = (rule, value, callback) => {
                const reg =
                    /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
                if (!value) {
                    return callback(new Error('证件号码不能为空'))
                } else if (!reg.test(value)) {
                    return callback(new Error('证件号码不正确'))
                } else {
                    callback()
                }
            };
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },//计算日历
                value1: '',
                RoomTypeId: '',
                token: localStorage.getItem("name"),
                ruleForm: {
                    checkName: '',
                    userId: '',
                    phone: '',
                    // num: 1,//计算房间数量
                    idCard: '',
                    arr: '',//存贮日历天数
                    desc: '',

                },
                Room: {},
                rules: {
                    checkName: [
                        {required: true, message: '请输入入住人名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: "请输入手机号码", trigger: "blur"},
                        {
                            validator: function (rule, value, callback) {
                                if (/^1[34578]\d{9}$/.test(value) == false) {
                                    callback(new Error("手机号格式错误"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    idCard: [
                        {
                            required: true,
                            message: '请输入入住人身份证号',
                            trigger: 'blur'
                        },
                        {
                            validator: checkIdNum,
                            trigger: 'blur'
                        },
                    ],
                }
            };
        },
        methods: {
            /*提交表单信息*/
            submitForm(formName) {
                const _this = this
                if(this.Room.store==0){
                    this.$message.error("该房型房间已满！！！")
                    return false;
                }
                this.$refs[formName].validate((valid) => {
                        if (!this.token) {
                            this.$message.error("请登录！！！")
                        } else if (valid) {
                            this.getDays()
                            this.ruleForm.id = this.$route.query.id
                            this.ruleForm.firstDay = this.value1[0]
                            this.ruleForm.lastDay = this.value1[1]
                            this.ruleForm.userId = localStorage.getItem("id"),
                                console.log(this.ruleForm)
                            console.log(localStorage.getItem("id"))
                            this.$axios.post('http://localhost:8088/api/buy', this.ruleForm).then(function (res) {
                                console.log(res.status)
                                if (res.status==200) {
                                    _this.$message.success("下单成功")
                                    setTimeout(_this.$router.push('/order'), 3000 );
                                } else {
                                    _this.$message.error("下单失败")
                                }
                            }).catch(function (err) {

                            })
                        }
                    }
                );
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*计算天数的方法*/
            getDays() {
                const strDateStart = this.value1[0]
                const strDateEnd = this.value1[1]
                const strSeparator = "-";
                //日期分隔符   var oDate1;   var oDate2;
                let iDays;
                const oDate1 = strDateStart.split(strSeparator);
                const oDate2 = strDateEnd.split(strSeparator);
                const strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
                const strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
                this.ruleForm.arr = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24)
                //把相差的毫秒数转换为天数
            },
            /*查询当前房型的详细信息*/
            getRoomTypeItem(id) {
                this.RoomTypeId = id
                console.log(id)
                const _this = this;
                this.$axios
                    .get(' http://localhost:8088/roomtype/getRoomTypeById/' + id)
                    .then(function (res) {
                        _this.Room = res.data;
                        console.log(_this.Room);
                    })
                    // eslint-disable-next-line no-unused-vars
                    .catch(function (err) {
                        alert('查询失败');
                    });
            },
            /*实时更新房间总数*/
            updateRoomTypeNum(){
                this.$axios.get("http://localhost:8088/roomtype/updateRoomTypeNum").then(function (res) {
                    console.log("房间总数更新成功！")
                }).catch(function (err) {
                    console.log("房间总数更新失败！")
                })
            },
            /*实时更新可预订房间数量*/
            updateRoomTypeStore(){
                this.$axios.get("http://localhost:8088/roomtype/updateRoomTypeStore").then(function (res) {
                    console.log("房间可预订数量更新成功！")
                }).catch(function (err) {
                    console.log("房间可预订数量更新失败！")
                })
            },
        },
        mounted() {
            this.getRoomTypeItem(this.$route.query.id)
            this.updateRoomTypeNum()
            this.updateRoomTypeStore()
        }
    }
</script>

<style scoped>
    .main_content {
        float: left;
        width: 100%;
    }

    .content_room span {
        font-family: 宋体;
        font-size: 20px;
        color: gray;
        margin: 5px;
    }
</style>
